<template>
  <div class="login relative">
    <div class="login-box">
      <div class="login-title">
        丽江可视化运行管理平台登录
      </div>
      <a-form :form="form"
              style="width: 320px;"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span:19 }">
        <a-form-item label="账号"
                     prop="loginName">
          <a-input v-decorator="['loginName', { rules: [{ required: true, message: '请输入账号' }] }]"
                   placeholder="请输入账号" />
        </a-form-item>
        <a-form-item label="密码"
                     prop="password">
          <a-input v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
                   placeholder="请输入密码"
                   type="password" />
        </a-form-item>

      </a-form>
      <a-spin :spinning="loading">
        <a-button type="primary"
                  html-type="submit"
                  @click="handleSubmit">
          登录
        </a-button>
      </a-spin>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import router from '@/router'
import Layout from '@/layout/index.vue'
import { message } from 'ant-design-vue'
export default {
  components: {
    Layout,
  },
  data() {
    return {
      loading: false,
      loginForm: {
        loginName: '',
        password: '',
      },
      tableData: [],
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
  mounted() {},
  methods: {
    handleSubmit() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
      this.form.validateFields((err, values) => {
        if (!err) {
          const url = '/government-platform-center/user/login'
          const params = values
          this.$axios
            .get(url, {
              params: params,
            })
            .then((res) => {
              if (res.data.msg == 'success') {
                const roleId = res.data.data.role.roleId || '100'
                localStorage.setItem('roleId', roleId)
                Cookies.set('roleId', roleId, { expires: 15 })
                localStorage.setItem(
                  'userInfo',
                  JSON.stringify(res.data.data.userInfo)
                )
                Cookies.set(
                  'userInfo',
                  JSON.stringify(res.data.data.userInfo),
                  { expires: 15 }
                )
                this.getBtn(roleId)
                const url = `/government-platform-center/menu/queryByRoleId?roleId=${roleId}`
                this.$axios.get(url).then((res2) => {
                  if (res2.data.code == 0) {
                    console.log(res2, 'res2')
                    this.tableData = res2.data.data
                    if (this.tableData == []) {
                      message.error('用户没有登录权限')
                    }
                    // this.tableData.push({
                    //   thisData: {
                    //     createTime: '2024-11-18 15:05:11',
                    //     updateTime: '2024-11-19 23:38:03',
                    //     deleted: 0,
                    //     menuId: 1122,
                    //     menuName: '角色管理',
                    //     menuType: 'C',
                    //     orderNum: 0,
                    //     parentId: 0,
                    //     remark: '',
                    //     url: '/role',
                    //     fileUrl: 'Role/index.vue',
                    //     isHideen: 1,
                    //   },
                    //   id: 2199,
                    //   parentId: 0,
                    //   childList: [],
                    // })
                    this.getOther(this.tableData)
                    router.addRoute({
                      path: '/',
                      component: Layout,
                      redirect: this.tableData[0].thisData.url,
                      children: this.tableData,
                    })
                    // const routerMenu = router.options.routes[0].children
                    // this.tableData = router.options.routes[0].children.concat(
                    //   this.tableData
                    // )
                    // this.tableData = this.tableData.map(ele=>{
                    //   return {
                    //
                    //   }
                    // })

                    // router.addRoutes(this.tableData)
                    localStorage.setItem(
                      'menuList',
                      JSON.stringify(this.tableData)
                    )
                    Cookies.set(
                      'menuList',
                      JSON.stringify(this.tableData)
                    )
                    this.loading = false
                    this.$router.push({ path: this.tableData[0].url })
                  }
                })
              }
            })
        }
      })
    },
    getOther(list) {
      list.forEach((item, index) => {
        item = { ...item, ...item.thisData }
        if (item.isHideen == 0) {
          item['isHiddenName'] = '隐藏'
        }
        if (item.isHideen == 1) {
          item['isHiddenName'] = '显示'
        }
        item['path'] = item.url
        item['component'] = this.loadView(item.fileUrl)
        this.$set(list, index, item)
        if (item.childList && item.childList.length > 0) {
          this.getOther(item.childList)
        }
      })
    },
    getBtn(roleId) {
      const url = `/government-platform-center/menu/queryFuncByRoleId?roleId=${roleId}`
      this.$axios.get(url).then((res) => {
        console.log(res)
        if (res.data.code == 0) {
          const btnArr = res.data.data.map((item) => item.url)
          localStorage.setItem('btnArr', JSON.stringify(btnArr))
        }
      })
    },
    loadView(view) {
      return () => import(`@/view${view}.vue`)
    },
  },
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #fff;
  background: url('@/assets/bg@2x.png') no-repeat;
  background-size: 100% 100%;
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 580px;
  background: #ffffff;
  border-radius: 20px;
  padding: 70px 54px;
  box-shadow: 0px 0px 30px 0px rgba(23, 103, 222, 0.25);

  .login-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    margin: 20px;
  }
}

.login-form {
  width: 100%;
}

.student {
  font-size: 20px;
  color: #0364ff;
}

.admin {
  font-size: 20px;
}
</style>
